<!DOCTYPE html>
<html>
<head>
		<meta charset="UTF-8">
		<title>QQ彩贝高级搜索</title>
		<style tspe="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			#d {
				width: 250px;
				border: 1px solid #cccccc;
				margin: 30px auto;
			}
			
			#d #d1 {
				margin: 10px;
				padding-bottom: 10px;
				font-size: 20px;
				font-weight: 600;
				border-bottom: 5px solid red;
			}
			
			#d #d2 #text {
				width: 223px;
				height: 30px;
				margin-left: 10px;
				font-size: 16px;
				padding-left: 5px;
				line-height: 30px;
			}
			
			#d #d3 #search {
				margin-left: 85px;
				margin-top: 10px;
				width: 80px;
				height: 30px;
				font-size: 16px;
				margin-bottom: 10px;
			}
			
			#d ul {
				list-style: none;
				margin: 10px;
				padding: 10px;
				padding-left: 23px;
			}
			
			#d ul li {
				float: left;
				margin: 10px;
			}
			
			#d ul:after {
				content: '';
				display: block;
				clear: both;
			}
			
			#d ul li select {
				width: 70px;
				height: 25px;
				padding-left: 5px;
				font-size: 15px;
				color: #828282;
			}
			
			#d #d2 ul {
				display: none;
			}
			
			@keyframes gradient {
				from {
					opacity: 0;
					height: 0;
				}
				%10 {
					opacity: 0.1;
					height: 20px;
				}
				%20 {
					opacity: 0.2;
					height: 40px;
				}
				%30 {
					opacity: 0.3;
					height: 60px;
				}
				%40 {
					opacity: 0.4;
					height: 80px;
				}
				%50 {
					opacity: 0.5;
					height: 100px;
				}
				%60 {
					opacity: 0.6;
					height: 101px;
				}
				%70 {
					opacity: 0.7;
					height: 120px;
				}
				%80 {
					opacity: 0.8;
					height: 140px;
				}
				%90 {
					opacity: 0.9;
					height: 160px;
				}
				to {
					opacity: 1;
					height: 180px;
				}
			}
			
			#d #d2:hover ul {
				border: 1px solid red;
				display: block;
				animation-name: gradient;
				animation-delay: 0;
				animation-duration: 3s;
				animation-timing-function:ease-in-out;
			}
		</style>
	</head>

	<body>
		<div id="d">
			<div id="d1">
				高级搜索
			</div>
			<div id="d2">
				<input type="text" name="text" value="" id="text" placeholder="请输入关键字" />
				<ul >
					<li>
						<select name="occation">
							<option value="0" selected>场合</option>
							<option value="1">学校</option>
							<option value="2">超市</option>
						<lect>
					<>
					<li>
						<select name="sex">
							<option value="0" selected>性别</option>
							<option value="1">男</option>
							<option value="2">女</option>
						<lect>
					<>
					<li>
						<select name="style">
							<option value="0" selected>风格</option>
							<option value="1">学校</option>
							<option value="2">超市</option>
						<lect>
					<>
					<li>
						<select name="color">
							<option value="0" selected>色系</option>
							<option value="1">暖色</option>
							<option value="2">冷色</option>
						<lect>
					<>
					<li>
						<select name="price">
							<option value="0" selected>价格</option>
							<option value="1">￥50</option>
							<option value="2">￥60</option>
						<lect>
					<>
					<li>
						<select name="age">
							<option value="0" selected>年龄</option>
							<option value="1">20</option>
							<option value="2">30</option>
						<lect>
					<>
					<li>
						<select name="season">
							<option value="0" selected>季节</option>
							<option value="1">春</option>
							<option value="2">夏</option>
						<lect>
					<>
				</ul>
			</div>
			<div id="d3">
				<input type="submit" name="search" id="search" value="搜索" />
			</div>

		</div>
	</body>

</html>
